  <template>
    <div ref="typechart" style="width: 600px; height: 430px">

    </div>
  </template>

  <script setup>
  import * as echarts from 'echarts'; // 将echarts中的所有对象放到echarts中
  import {onMounted, reactive, ref} from "vue";
  import {getOptionInfo} from "@/api/methods/initInfo.js";
  import {countCerType} from "@/api/apiPath/sixPart.js";
  const props = defineProps([])
  const typechart = ref(); //创建dom引用，ref() 函数的返回值
  const tableData = ref([
    { name: '有机证书', value: 0 },
    { name: '绿色证书', value: 0 },
    { name: '地理标识证书', value: 0 },
    { name: '无公害证书', value: 0 },
  ]);
  const certTypes = ["有机证书", "绿色证书", "地理标识证书", "无公害证书"];
  onMounted(async () => {
    try {
      const promises = certTypes.map(async (type, index) => {
        const optionInfo = await getOptionInfo(countCerType(type));
        tableData.value[index].value = optionInfo;
      });
      await Promise.all(promises);
      console.log(tableData.value);

      const option = {
        // 设置图表的标题
        title: {
          text: '证书数量统计',
          left: 'center'
        },
        // 设置提示框的相关属性
        tooltip: {
          // trigger属性来指定tooltip的触发方式, item（数据项触发）
          trigger: 'item'
        },
/*        legend: {
          // Try 'horizontal'
          orient: 'vertical',
          top: 'center',
          left: 'left',
          data: ['有机证书', '绿色证书', '地理标识证书', '无公害证书']
        },*/
        xAxis: {
          data: certTypes,
          // 设置x轴名称
          name: "证书类型",
          type: 'category',
          axisTick: {
            // 是否展示轴的刻度线
            show: false
          },
          axisLabel: {
            // x轴文本的颜色
            textStyle: {
              color: "#7c7d81"
            }
          },
          axisLine: {
            // x轴的颜色
            lineStyle: {
              color: "#64748B"
            }
          }
        },
        yAxis: {
          name: "证书数（条）",
          type: 'value',
          // y轴name与横纵坐标轴线的间距
          nameGap: 10,
          nameTextStyle: {
            color: "#aaa",
            //上右下左与原位置距离
            padding: [0, 0, 25, -50]
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#eeeef0"
            }
          },
          axisLabel: {
            margin: 50,
            textStyle: {
              color: "#7c7d81",
              align: "left"
            }
          },
          axisLine: {
            // 是否显示轴的线
            show: false
          },
        },
        series: [
          {
            symbol: "circle",
            // 柱子宽度
            barWidth: 45,
            //实现数字展示在柱状图
            label: {
              show:true,
              position:"top",
              color:"#3F85FF",
              fontWeight:"bold",
            },
            type: 'bar',
            data: tableData.value,
            barCategoryGap: '50%',
            itemStyle: {
              normal: {
                color:"#8DB7FF",
                barBorderRadius:[4,4,0,0],//设置柱子圆角
              },
            },
          }
        ]
      };

      // 基于准备好的dom,初始化echarts实例
      const myChart = echarts.init(typechart.value);
      myChart.setOption(option);
    } catch (error) {
      console.error(error);
    }
  })
  </script>

  <style scoped>

  </style>